<template>
    <div style="width: 100%; height: 100%;">
        <div id="pie20250910" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'

let myEchartsPie = (text, dataArray) => {
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    const dom = document.getElementById('pie20250910')
    // getInstanceByDom： 获取 dom 容器上的实例
    const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
    let option = {
        title: {
            text: text,
            subtext: '空气质数',
            left: 'center',
            textStyle: { color: '#e2e2e2' }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: { color: '#e2e2e2' }
        },
        series: [
            {
                name: '空气质量',
                type: 'pie',
                radius: '50%',
                data: dataArray,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.clear();
    myChart.setOption(option);
}
// 暴露方法,给父模块调用
defineExpose({ myEchartsPie })
</script>

<style scoped></style>
